<style>
  #baseflow-add {
    padding: 20px 25px 25px 0;
  }
  #type-selector {
    display: none;
  }
  #type {
    width: 45%;
    transition: all 0.5s;
  }
  .type-name {
    width: 55%;
  }
</style>
<div class="layui-fluid" id="baseflow-add">
  <form class="layui-form" action="" lay-filter="baseflow-add-form">
    <div class="layui-form-item">
      <!-- <label class="layui-form-label febs-form-item-require">组织机构：</label>
      <div class="layui-input-block">
        <select name="orgId" lay-filter="orgIdSelect">
          <option value=""></option>
          <option value=""></option>
          <option value="1201">1201-站成AD厂</option>
          <option value="9001">9001-AD开发中心</option>
          <option value="9002">9002-NB开发中心</option>
          <option value="1350">1350-安乡站成底厂</option>
          <option value="9003">9003-迪桑特开发中心</option>
          <option value="6200">6200-东莞站瑞底厂</option>
          <option value="1600">1600-安乡大旺</option>
          <option value="1700">1700-阳新龙行天下</option>
          <option value="2300">2300-越南富存</option>
          <option value="2400">2400-越南大可</option>
          <option value="1500">1500-龙行天下（二厂）</option>
          <option value="1301">1301-湖南NB厂</option>
          <option value="8100">8100-站佳事业部</option>
          <option value="9000">9000-东莞站成研创</option>
          <option value="1100">1100-东莞站成一厂</option>
          <option value="1200">1200-东莞站成二厂</option>
          <option value="1300">1300-湖南一厂</option>
          <option value="1400">1400-钟祥鞋厂</option>
          <option value="2100">2100-越南一厂</option>
          <option value="2200">2200-越南二厂</option>
          <option value="6100">6100-湖南站成底厂</option>
          <option value="5100">5100-东莞喜悦鞋材</option>
          <option value="6400">6400-钟祥底厂</option>
          <option value="2600">2600-龙行天耀</option>
          <option value="7100">7100-原力3D</option>
          <option value="7200">7200-杰富亿</option>
          <option value="1501">1501-常德站成</option>
        </select>
      </div> -->
      <label class="layui-form-label febs-form-item-require">组织机构：</label>
      <div class="layui-input-block orgId"></div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label febs-form-item-require">单据分类：</label>
      <div class="layui-input-block" id="billStdNo"></div>
    </div>
    <div class="layui-form-item" id="dept-selector" style="display: none">
      <label class="layui-form-label febs-form-item-require">部门：</label>
      <div class="layui-input-block" id="dept"></div>
    </div>
    <div class="layui-form-item" id="type-selector" style="display: block">
      <label class="layui-form-label febs-form-item-require">类别ID：</label>
      <div class="layui-input-block" style="display: flex">
        <div id="type"></div>
        <div class="type-name">
          <label class="layui-form-label febs-form-item-require"  style="margin-left: 0;display: block">类别名称：</label>
          <div class="layui-input-block type-input">
            <input type="text" name="deptName" minlength="2" autocomplete="off" class="layui-input" />
          </div>
        </div>
      </div>
    </div>
    <!--        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">流程编号：</label>
            <div class="layui-input-block">
                <input type="text" name="basestdNo" minlength="2" maxlength="6" lay-verify="range|basestdNo"
                       autocomplete="off" class="layui-input">
            </div>
        </div>-->
    <div class="layui-form-item">
      <label class="layui-form-label febs-form-item-require">流程名称：</label>
      <div class="layui-input-block">
        <input type="text" name="nameT" minlength="2" maxlength="60" autocomplete="off" class="layui-input" />
      </div>
    </div>

    <!-- <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">备注：</label>
      <div class="layui-input-block">
        <textarea name="" maxlength="100" class="layui-textarea" readonly="readonly"> </textarea>
      </div>
    </div> -->
    <div class="layui-form-item febs-hide">
      <button class="layui-btn" lay-submit="" lay-filter="baseflow-add-form-submit" id="submit"></button>
      <button type="reset" class="layui-btn" id="reset"></button>
    </div>
  </form>
</div>

<script>
  layui.use(["febs", "form", "validate", "xmSelect"], function () {
    let $ = layui.$,
      febs = layui.febs,
      layer = layui.layer,
      form = layui.form,
      xmSelect = layui.xmSelect,
      validate = layui.validate,
      orgId = null,
      billStdNo = null,
      deptNo = null,
      deptXmlSelect,
      typeNoSelect,
      orgXmlSelect,
      billStdNoSelect;

    form.verify(validate);
    form.render();

    orgXmlSelect = xmSelect.render({
      el: ".orgId",
      model: {
        label: {
          type: "showBillStd",
          showBillStd: {
            template(data, item) {
              return item[0].orgId + "-" + item[0].shortnmT;
            },
          },
        },
      },
      template({ name, value }) {
        return value + "-" + name;
      },
      direction: "down",
      filterable: true,
      filterMethod: function (val, item) {
        if (item.orgId.toString().startsWith(val)) {
          //把value相同的搜索出来
          return true;
        }
        if (item.shortnmT.indexOf(val) != -1) {
          //名称中包含的搜索出来
          return true;
        }
        return false; //不知道的就不管了
      },
      clickClose: true,
      data: [...(JSON.parse(sessionStorage.OrgList) || {})],
      tree: {
        show: true,
        strict: false,
        showLine: false,
        clickCheck: true,
        expandedKeys: [-1],
      },
      name: "orgId",
      theme: {
        color: "#52c41a",
      },
      prop: {
        name: "shortnmT",
        value: "orgId",
      },
      height: "250px",
      //监听机构菜单选择
      on: function (data) {
        orgId = data.change[0].orgId;
        if (billStdNo != null) {
          if (billStdNo == "DESTORY" || billStdNo == "DESTORY_Y") {
            febs.get(ctx + "baseflow/getNames?orgId=" + orgId, null, function (data) {
              deptXmlSelect.update(data);
            });
          } else {
            febs.get(ctx + "baseflow/getBillList?orgId=" + orgId + "&billstdNo=" + billStdNo, null, function (data) {
              typeNoSelect.update(data);
            });
          }
        }
        if (data.isAdd) {
          return data.change.slice(0, 1);
        }
      },
    });
    //部门下拉菜单
    deptXmlSelect = xmSelect.render({
      el: "#dept",
      model: { label: { type: "text" } },
      direction: "down",
      filterable: true,
      clickClose: true,
      tree: {
        show: true,
        strict: false,
        showLine: false,
        clickCheck: true,
        expandedKeys: [-1],
      },
      name: "deptname",
      theme: {
        color: "#52c41a",
      },
      prop: {
        name: "deptName",
        value: "deptName",
      },
      height: "140px",
      on: function (data) {
        deptNo = data.change[0].wcNo;
        if (data.isAdd) {
          return data.change.slice(0, 1);
        }
      },
    });
    //单据分类下拉菜单
    billStdNoSelect = xmSelect.render({
      el: "#billStdNo",
      model: {
        label: {
          type: "showBillStd",
          showBillStd: {
            template(data, item) {
              return item[0].billstdNo + "-" + item[0].billstdNm;
            },
          },
        },
      },
      template({ name, value }) {
        return value + "-" + name;
      },
      filterable: true,
      filterMethod: function (val, item) {
        if (item.billstdNo.startsWith(val)) {
          //把value相同的搜索出来
          return true;
        }
        if (item.billstdNm.indexOf(val) != -1) {
          //名称中包含的搜索出来
          return true;
        }
        return false; //不知道的就不管了
      },
      direction: "down",
      clickClose: true,
      data: [...(JSON.parse(sessionStorage.billStdList) || {})],
      tree: {
        show: true,
        strict: false,
        showLine: false,
        clickCheck: true,
        expandedKeys: [-1],
      },
      name: "billstdNo",
      theme: {
        color: "#52c41a",
      },
      prop: {
        name: "billstdNm",
        value: "billstdNo",
      },
      height: "180px",
      on: function (data) {
        //隐藏新增功能
        $(".add-type").css("display", "none");
        $(".btn-add").css("display", "block");
        $(".type-id-input").eq(0).val("");
        $(".type-name-input").eq(0).val("");
        $(".type-id-alert").text("");
        typeNoSelect.update({ disabled: false });
        //显示部门，隐藏类型
        billStdNo = data.change[0].billstdNo;
        if (false) {
          $("#dept-selector").css("display", "block");
          $("#type-selector").css("display", "none");
          //非初始化时，更改类别根据类别渲染
          $(".type-input").children()[0].value = "";
          if (orgId != null) {
            febs.get(ctx + "baseflow/getNames?orgId=" + orgId, null, function (data) {
              deptXmlSelect.update(data);
            });
          }
        } else {
          //隐藏部门,显示类型
          billStdNo = data.change[0].billstdNo;
          $("#dept-selector").css("display", "none");
          $("#type-selector").css("display", "block");
          if (orgId != null) {
            febs.get(ctx + "baseflow/getBillList?orgId=" + orgId + "&billstdNo=" + billStdNo, null, function (data) {
              typeNoSelect.update(data);
            });
          }
        }
        if (data.isAdd) {
          return data.change.slice(0, 1);
        }
      },
    });

    //类别下拉菜单
    typeNoSelect = xmSelect.render({
      el: "#type",
      model: {
        label: {
          type: "showValue",
          showValue: {
            template(data, item) {
              return item[0].billstdG;
            },
          },
        },
      },
      template: (item) => {
        return item.value;
      },
      direction: "down",
      clickClose: true,
      filterable: true,
      filterMethod: function (val, item, index, prop) {
        if (item.billstdG.indexOf(val) != -1) {
          //value中包含的搜索出来
          return true;
        }
        return false;
      },
      create: function (val, arr) {
        //返回一个创建成功的对象, val是搜索的数据, arr是搜索后的当前页面数据
        if (arr.length === 0) {
          return {
            billstdgNm: "",
            billstdG: "创建-" + val,
          };
        }
      },
      name: "billstdG",
      theme: {
        color: "#52c41a",
      },
      prop: {
        name: "billstdgNm",
        value: "billstdG",
      },
      height: "140px",
      on: function (data) {
        // console.log(data);
        if (data.arr.length == 0) {
          $(".type-input").children()[0].value = "";
        } else {
          $(".type-input").children()[0].value = data.change[0].billstdgNm;
        }
        if (data.isAdd) {
          return data.change.slice(0, 1);
        }
      },
    });

    form.on("submit(baseflow-add-form-submit)", function (data) {
      //整合统一字段post

      let FormData = data;

      if (FormData.field.orgId == "") {
        febs.alert.error("请选择机构");
        return false;
      }
      if (FormData.field.billstdNo == "") {
        febs.alert.error("请选择单据分类");
        return false;
      }
      if (FormData.field.nameT == "") {
        febs.alert.error("请填写流程名称");
        return false;
      }
      //机构判断
      if (false) {
        //当类型为DESTORY_Y和DESTORY
        if (FormData.field.deptname == "") {
          febs.alert.error("请选择部门");
          return false;
        }
        FormData.field.billstdG = deptNo;
        FormData.field.deptName = FormData.field.deptname;
        delete data.field.deptname;
        febs.post(ctx + "baseflow/add", FormData.field, function () {
          layer.closeAll();
          febs.alert.success("新增流程成功");
          $("#febs-baseflow").find("#queryBaseFlow").click();
        });
      } else {
        //类型为其他时经过判断
        //当basestdNo存在并唯一时才能post;
        delete data.field.deptname;
        if (FormData.field.billstdG != "") {
          if (FormData.field.billstdG.indexOf("创建-") == "0") {
            FormData.field.billstdG = FormData.field.billstdG.substring(3);
          }
          if (FormData.field.deptName == "") {
            febs.alert.error("请填写类别名称");
            return false;
          }
          //子类名字可用
          febs.post(ctx + "baseflow/add", FormData.field, function () {
            layer.closeAll();
            febs.alert.success("新增流程成功");
            $("#febs-baseflow").find("#queryBaseFlow").click();
          });
        } else {
          febs.alert.error("请选择类别");
          return false;
        }
      }
      return false;
    });

    // form.on("select(orgIdSelect)", function (data) {
    //   // console.log("orgIdSelect", data);
    //   // console.log("typeNoSelect", typeNoSelect);
    // });

    function getQueryParams(flag) {
      deptId = deptXmlSelect.getValue("valueStr");
      if (flag) {
        deptId = "";
      }
      let params = $searchForm.serializeJson();
      params.deptId = deptId;
      return params;
    }
  });
</script>
